<template>
	<view class="detail">
		<view class="nav">
			<view @click="selNavFun(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view class="nav" v-if="childList.length > 0" style="top:75rpx;padding: 20rpx 20rpx 0 20rpx;">
			<view @click="selChildFun(index)" :class="index==selChild?'nav-item hover':'nav-item'" v-for="(item,index) in childList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view v-if="childList.length <= 0 && pageResult.list.length > 0" class="listInfo">
			<view class="list_item" v-for="(item,index) in pageResult.list" :key="index">
				<image :src="item.cover" mode=""  @click="jump('card_view', item.cardTypeId)"></image>
				<!-- <view class="code"  @click="jump('card_view', item.cardTypeId)">{{item.code}}</view> -->
				<view class="item_info"  @click="jump('card_view', item.cardTypeId)">
					<view class="title">{{item.title}}</view>
					<view class="title">{{item.code}}</view>
					<view class="title">{{item.sketch}}</view>
					<view class="price">
						总数：{{item.num}} / 剩余：{{item.surplusNum}}
					</view>
					<SRV-status v-if="item.state != 1 && item.state != 2" class="statusBox" :name="item.stateName"  size="140" fontSize="28" boder="5" :color="item.status==95 ? '#008dd3' : '#cc0000'" ></SRV-status>
				</view>
				<view class="btnList">
					<view class="btn goLog"  @click="showUseList(item.useList)" v-if="item.useList && item.useList.length > 0">提货记录</view>
					<view class="btn goGive"  @click="jump('confirmGive', item.id)" v-if="item.isGive">转赠</view>
					<view class="btn goPickup"  @click="jump('confirmPickup', item.id)" v-if="item.isPickup">去提货</view>
				</view>
			</view>
		</view>
		<view v-if="childList.length > 0 && pageResult.list.length > 0" class="listInfo" style="margin-top: 150rpx;">
			<view class="list_item" v-for="(item,index) in pageResult.list" :key="index">
				<image :src="item.card_cover" mode=""  @click="jump('giveInfo', item.id)"></image>
				<view class="item_info"  @click="jump('giveInfo', item.id)">
					<view class="title">{{item.card_title}}</view>
					<view class="title">{{item.card_code}}</view>
					<view class="title">{{item.card_sketch}}</view>
					<view class="title">{{item.give_info}}</view>
					<SRV-status class="statusBox" :name="item.statusName"  size="140" fontSize="34" boder="5" :color="item.status==1 ? '#008dd3' : (item.status==3||item.status==4||item.status==5 ? '#cc0000' : '#009900')" ></SRV-status>
				</view>
				<view class="btnList">
					<view class="btn goInfo"  @click="jump('giveInfo', item.id)">详情</view>
					<view class="btn goShare"  @click="showShareFun(index)" v-if="item.isCancel && pageParam.state == 4">分享</view>
					<view class="btn goCancel"  @click="cancelFun(index)" v-if="item.isCancel && pageParam.state == 4">撤回</view>
					<view class="btn goReceive"  @click="receiveFun(index)" v-if="item.isReceive && pageParam.state == 5">接收</view>
					<view class="btn goReject"  @click="rejectFun(index)" v-if="item.isReceive && pageParam.state == 5">拒收</view>
				</view>
			</view>
		</view>
		<view v-if="pageResult.list.length == 0" class="nolist">
			<image :src="obtainImgUrl('icon/noItem.png')" mode="widthFix"></image>
		    <text>暂无相关记录～</text>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popupInfo">
				<view class="pickupTitle">提货记录</view>
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="popupItem" v-for="(item, index) in useList" :key="index">
					<view class="pickupSn">提货编号：{{item.order_sn}}</view>
					<view class="pickupDate">提货时间：{{item.created_time}}</view>
					<view class="pickupNum">提货数量：{{item.num}}</view>
					<view class="pickupBtn">
						<view class="btn" @click="jump('order_view', item.order_id)">详情</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="previewpup" type="center">
			<view class="popbox">
				<swiper class="swiper" duration="500" :circular="false" :skip-hidden-item-layout="true" :disable-programmatic-animation="true" >
					<swiper-item  class="swiper-item" v-for="(itemImg,index) in shareList"  :key="index" :item-id="'swiper-item-' + index" >
						<view class="imagebox">	
							<image mode="widthFix" :lazy-load="true" :src="itemImg.max" :data-src="itemImg.src" />
						</view>
					</swiper-item>
				</swiper>
				
				<!-- 状态标识 -->
				<view class="maskshowrev">
				    <button class="btall bt2" open-type="share" @click="shareFun(1)">
				        <uni-icons type="weixin" color="#ccc" size="15"></uni-icons>
				        <text>发送给好友</text>
				    </button>
					<button class="btall bt3" @click="shareFun(3)">
					    <uni-icons type="pulldown" color="#ccc" size="15"></uni-icons>
					    <text>下载</text>
					</button>
					<button class="btall bt1" @click="shareFun(4)">
					    <uni-icons type="close" color="#ccc" size="15"></uni-icons>
					    <text>关闭</text>
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
    var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import {Base64} from '../../static/base64.min.js';
	import ShareIndex from '../../static/share.js';
	export default {
		mixins: [ShareIndex],
		data() {
			return {
				navList: [
				   {"itemId": "0", "itemName" : "全部", "childList": []},
				   {"itemId": "1", "itemName" : "待提货", "childList": []},
				   {"itemId": "2", "itemName" : "提货完成", "childList": []},
				   {"itemId": "3", "itemName" : "已过期", "childList": []},
				   {"itemId": "4", "itemName" : "我的赠予", "childList": [
					   {"itemId": 0, "itemName": "全部"},
					   {"itemId": 1, "itemName": "赠送中"},
					   {"itemId": 2, "itemName": "已接受"},
					   {"itemId": 3, "itemName": "被拒绝"},
					   {"itemId": 4, "itemName": "撤回"},
				   ]},
				   {"itemId": "5", "itemName" : "我的被赠", "childList": [
					   {"itemId": 0, "itemName": "全部"},
					   {"itemId": 1, "itemName": "待接受"},
					   {"itemId": 2, "itemName": "已接受"},
					   {"itemId": 3, "itemName": "已拒绝"},
					   {"itemId": 4, "itemName": "过期"},
				   ]},
                ],
				selNav : 0,
				childList: [],
				selChild: 0,
				useList: [], 
				shareList: [],
				nowCurrent: 0,
				pageParam: {
					status: 0,
					state: 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			selNavFun(index) {
				_self.selNav = index;
				let item = _self.navList[index];
				_self.selChild = 0;
				_self.childList = item.childList;
				_self.pageParam.state = item.itemId;
				_self.pageParam.status = 0;
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getList();
			},
			selChildFun(index) {
				_self.selChild = index;
				let item = _self.childList[index];
				_self.pageParam.status = item.itemId;
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getList();
			},
			getList(){
				let url = _self.childList.length > 0 ? 'give-list' : 'card-list';
				_self.pageParam.page++
				serve.request({
					url: '/member/member/'+url,
					data: _self.pageParam
				}).then(res => {
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			showUseList(list) {
				if(list.length <= 0) {
					return ;
				}
				this.useList = list;
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			cancelFun(index) {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要撤回该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							var operateId = that.pageResult.list[index].id;
							serve.request({
								url: '/member/member/give-cancel',
								data: {
									id: operateId
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									if(that.pageParam.status == 0){
										that.pageResult.list[index].status = 5;
										that.pageResult.list[index].statusName = "已撤回";
										that.pageResult.list[index].isCancel = false;
										that.pageResult.list[index].isReceive = false;
									} else {
										that.pageResult.list.splice(index,1);
									}
									that.$forceUpdate();
								} 
							});
						}
					}
				});
			},
			receiveFun(index) {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定接收该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							var operateId = that.pageResult.list[index].id;
							serve.request({
								url: '/member/member/give-receive',
								data: {
									id: operateId
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									if(that.pageParam.status == 0){
										that.pageResult.list[index].status = 2;
										that.pageResult.list[index].statusName = "已接受";
										that.pageResult.list[index].isCancel = false;
										that.pageResult.list[index].isReceive = false;
									} else {
										that.pageResult.list.splice(index,1);
									}
									that.$forceUpdate();
								} 
							});
						}
					}
				});
			},
			rejectFun(index) {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要拒收该笔赠送吗',
				    success: function (res) {
				        if (res.confirm) {
							var operateId = that.pageResult.list[index].id;
							serve.request({
								url: '/member/member/give-reject',
								data: {
									id: operateId
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
									icon: 'none'
								});
								if(res.code == 200) {
									if(that.pageParam.status == 0){
										that.pageResult.list[index].status = 3;
										that.pageResult.list[index].statusName = "已拒绝";
										that.pageResult.list[index].isCancel = false;
										that.pageResult.list[index].isReceive = false;
									} else {
										that.pageResult.list.splice(index,1);
									}
									that.$forceUpdate();
								} 
							});
						}
					}
				});
			},
			showShareFun(index) {
				this.shareList = this.pageResult.list[index].shareList;
				this.$refs.previewpup.open();  
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			shareFun(type) {
				this.shareItem = this.shareList[this.nowCurrent];
				if(type == 3) {
					var imgUrl = this.shareItem.imageUrl;
					uni.showModal({
						title: '提示',
						content: '确定要下载海报到您的相册吗',
						success: function (res) {
							if (res.confirm) {
								uni.downloadFile({
									url: imgUrl,
									success: (res) =>{
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										} 
									},
									fail: function() {
										uni.showToast({
											title: "保存失败2",
											icon: "none"
										});
									}
								})
							} 
						}
					});
				}
				if(type == 4) {
					this.$refs.previewpup.close();
				}
				return ;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
            _self = this;
			_self.pageParam.state = options.state || 0;
			_self.pageParam.status = 0;
			if(_self.pageParam.state > 0) {
				_self.navList.forEach((i, k) => {
					if(i.itemId == _self.pageParam.state) {
						_self.selNav = k;
						return false;
					}
				});
			}
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.detail{
		position: absolute;
		width: 100%;
		.nav {
			box-sizing: border-box;
			padding: 20rpx 10rpx 0 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
			position: absolute;
			z-index: 99;
			width: 100%;
		
			.nav-item {
				height: 50rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
		}
		
		.nolist{
		    width: 100%;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    font-size:28rpx;
		    color:rgba(204,204,204,1);
			margin-top: 200rpx;
		    image{
		        margin-top: 140rpx;
		        width:112rpx;
		        margin-bottom: 45rpx;
		    }
		}
		.listInfo {
			padding: 2%;
			height: 90vh;
			overflow-y: auto;
			margin-top: 75rpx;
		}
		.list_item {
			width: 680rpx;
			padding-bottom: 16rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 30rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #ccc;
			margin-bottom: 8rpx;
			border-radius: 14rpx;
			position: relative;
			
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 2%;
			}
			.item_info {
				width: calc(100% - 160rpx);
				height: 150rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #333;
				position: relative;
			}
			.code{
				position: absolute;
				right: 4rpx;
				top: 4rpx;
				width: 250rpx;
				font-size: 35rpx;
			}
			.title {
				height: 40rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.sketch {
				font-size: 26rpx;
				color: #aaa;
				// margin-top: 10rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.price{
				// margin-top: 20rpx;
				font-size:28rpx;
				color: #42bfca;
				position: relative;
			}
			.statusBox {
				position: absolute;
				top: 0;
				right: 20rpx;
			}
			.btnList {
				width: 100%;
				display: flex;
				// flex-direction: row-reverse;
				flex-wrap: wrap;
				justify-content: flex-end;
				margin-top: 20rpx;
				
				.btn {
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					margin-left: 20rpx;
					padding: 0 20rpx;
				}
			}
		}
		.popupInfo {
			position: relative;
			z-index: 200;
			width: 90vw;
			background: #FFFFFF;
			padding: 20rpx;
			.pickupTitle {
				text-align: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #ccc;
				margin-bottom: 20rpx;
			}
			.close {
				position: absolute;
				width: 40upx;
				height: 40upx;
				right: 10upx;
				top: 10upx;
			}
			.popupItem {
				padding: 20rpx;
				margin-bottom: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				.pickupSn {
					width: 100%;
					margin-bottom: 10rpx;
				}
				.pickupDate {
					width: 100%;
					margin-bottom: 10rpx;
				}
				.pickupNum {
					width: 80%;
				}
				.pickupBtn {
					width: 120rpx;
					.btn {
						width: 120rpx;
						text-align: center;
						border: 1rpx solid #f60;
						background: #f60;
						color: #fff;
						border-radius: 10rpx;
					}
				}
			}
		}
	
		.goLog {
			border: 1rpx solid #868686;
			background: #868686;
		}
		.goPickup {
			border: 1rpx solid #ffd900;
			background: #ffd900;
		}
		.goGive {
			border: 1rpx solid #0000ff;
			background: #0000ff;
		}
		.goInfo {
			border: 1rpx solid #ffd900;
			background: #ffd900;
		}
		.goShare {
			border: 1rpx solid #0000ff;
			background: #0000ff;
		}
		.goCancel {
			border: 1rpx solid #868686;
			background: #868686;
		}
		.goReceive {
			border: 1rpx solid #ff00ff;
			background: #ff00ff;
		}
		.goReject {
			border: 1rpx solid #ffd900;
			background: #ffd900;
		}
		.popbox{
			width: 100vw;
			height: 100vh;
			//background-color: #333;
			display: flex;
			flex-direction: column; 
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 140upx;
			position: relative;
			
			.swiper{
				width: 100%; 
				height: 100%;
				min-height: 500upx;
				position: absolute;
				top:0upx;
				left:0upx;
				
				.swiper-item{
					width: 100%; 
					height: 100%;
					min-height: 500upx;
					padding-bottom: 120upx;
					background-color: rgba(#000,0.8);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.imagebox{
						width: 100%;
						height: auto;
						min-height: 300upx; 
						background-size: 20% auto;
						background-position: center center;
						
						image{
							width: 100%;
							height: auto;
						}
					}
				}
			}
		
			.maskshowrev {
				width: 100%;
				height: 50upx;
				bottom: 250upx;
				position: fixed;
				display: flex;
				justify-content: space-around;
				
				//border: 1upx #fff solid;
				.btall {
					height: 50upx;
					border-radius: 25upx;
					padding: 0 20upx;
					color: #Fff;
					font-size: 24upx;
					line-height: 50upx;
					font-weight: normal;
					text-align: center; 
				}
				
				.bt1 {background-color: rgba(#780000, 0.9);}
				.bt2 {background-color: rgba(#7bc9d3, 0.9);}
				.bt3 {background-color: rgba(#ffcc00, 0.9);}
			}
		}
	}
</style>
